<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px">

        <el-row :gutter="20">
                      <el-col :span="12">
                <el-form-item label="columnname" prop="columnname">
                  <el-input v-model="temp.columnname" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnnamesql" prop="columnnamesql">
                  <el-input v-model="temp.columnnamesql" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnnamesqlsum" prop="columnnamesqlsum">
                  <el-input v-model="temp.columnnamesqlsum" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnshowname" prop="columnshowname">
                  <el-input v-model="temp.columnshowname" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="isfrozencolumn" prop="isfrozencolumn">
                  <el-input v-model="temp.isfrozencolumn" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="needsum" prop="needsum">
                  <el-input v-model="temp.needsum" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="sort" prop="sort">
                  <el-input v-model="temp.sort" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="ishidden" prop="ishidden">
                  <el-input v-model="temp.ishidden" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="canadd" prop="canadd">
                  <el-input v-model="temp.canadd" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="tmptTableId" prop="tmptTableId">
                  <el-input v-model="temp.tmptTableId" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="isquery" prop="isquery">
                  <el-input v-model="temp.isquery" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columntype" prop="columntype">
                  <el-input v-model="temp.columntype" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="issortcolumn" prop="issortcolumn">
                  <el-input v-model="temp.issortcolumn" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="optionssql" prop="optionssql">
                  <el-input v-model="temp.optionssql" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="dataresource" prop="dataresource">
                  <el-input v-model="temp.dataresource" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="optionspage" prop="optionspage">
                  <el-input v-model="temp.optionspage" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="tablealiasname" prop="tablealiasname">
                  <el-input v-model="temp.tablealiasname" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnwidth" prop="columnwidth">
                  <el-input v-model="temp.columnwidth" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="删除标志" prop="deleteflag">
                  <select-option
                      v-model="temp.deleteflag"
                      :clearable=false
                      prop-name="Deleteflag"
                      :prop-ds-type=1
                      prop-url="/core/enum/getData4AddBy"
                  />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="inputwidth4adddialog" prop="inputwidth4adddialog">
                  <el-input v-model="temp.inputwidth4adddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="linewidth4adddialog" prop="linewidth4adddialog">
                  <el-input v-model="temp.linewidth4adddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="required4adddialog" prop="required4adddialog">
                  <el-input v-model="temp.required4adddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="dataoptions4adddialog" prop="dataoptions4adddialog">
                  <el-input v-model="temp.dataoptions4adddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="style4adddialog" prop="style4adddialog">
                  <el-input v-model="temp.style4adddialog" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="charttype" prop="charttype">
                  <el-input v-model="temp.charttype" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnDatatype" prop="columnDatatype">
                  <el-input v-model="temp.columnDatatype" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnIsnotnull" prop="columnIsnotnull">
                  <el-input v-model="temp.columnIsnotnull" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="queryType" prop="queryType">
                  <el-input v-model="temp.queryType" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="defaultValue" prop="defaultValue">
                  <el-input v-model="temp.defaultValue" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnTip" prop="columnTip">
                  <el-input v-model="temp.columnTip" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="dataTransfer" prop="dataTransfer">
                  <el-input v-model="temp.dataTransfer" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="columnlayoutStyle4adddialog" prop="columnlayoutStyle4adddialog">
                  <el-input v-model="temp.columnlayoutStyle4adddialog" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
  </div>
</template>

<script>
import {createApi, updateApi, fetchList} from './api'
// 导入多选项组件
import SelectOption from '@/views/coding/components/SelectOption'

export default {
    name: 'TmptTbColumn-FormDetail',

    components: { SelectOption },

    props: {
        isModule: {
            type: Boolean,
            default: false
        },
        row: {}
    },

    data() {
        return {
            rules: {
                columnname: [{ required: true, message: 'required', trigger: 'blur' }],
                columnnamesql: [{ required: true, message: 'required', trigger: 'blur' }],
                columnnamesqlsum: [{ required: true, message: 'required', trigger: 'blur' }],
                columnshowname: [{ required: true, message: 'required', trigger: 'blur' }],
                isfrozencolumn: [{ required: true, message: 'required', trigger: 'blur' }],
                needsum: [{ required: true, message: 'required', trigger: 'blur' }],
                sort: [{ required: true, message: 'required', trigger: 'blur' }],
                ishidden: [{ required: true, message: 'required', trigger: 'blur' }],
                canadd: [{ required: true, message: 'required', trigger: 'blur' }],
                tmptTableId: [{ required: true, message: 'required', trigger: 'blur' }],
                isquery: [{ required: true, message: 'required', trigger: 'blur' }],
                columntype: [{ required: true, message: 'required', trigger: 'blur' }],
                issortcolumn: [{ required: true, message: 'required', trigger: 'blur' }],
                optionssql: [{ required: true, message: 'required', trigger: 'blur' }],
                dataresource: [{ required: true, message: 'required', trigger: 'blur' }],
                optionspage: [{ required: true, message: 'required', trigger: 'blur' }],
                tablealiasname: [{ required: true, message: 'required', trigger: 'blur' }],
                columnwidth: [{ required: true, message: 'required', trigger: 'blur' }],
                deleteflag: [{ required: true, message: 'required', trigger: 'blur' }],
                inputwidth4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                linewidth4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                required4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                dataoptions4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                style4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
                charttype: [{ required: true, message: 'required', trigger: 'blur' }],
                columnDatatype: [{ required: true, message: 'required', trigger: 'blur' }],
                columnIsnotnull: [{ required: true, message: 'required', trigger: 'blur' }],
                queryType: [{ required: true, message: 'required', trigger: 'blur' }],
                defaultValue: [{ required: true, message: 'required', trigger: 'blur' }],
                columnTip: [{ required: true, message: 'required', trigger: 'blur' }],
                dataTransfer: [{ required: true, message: 'required', trigger: 'blur' }],
                columnlayoutStyle4adddialog: [{ required: true, message: 'required', trigger: 'blur' }],
            },
            temp: {
            }
        }
    },

    watch: {
        'row': {
            immediate: true, // vue首次赋值不触发watch的解决方法
            handler: function(nval){
                if (this.isModule) {
                    // this.temp = Object.assign({}, this.row) // copy obj
                    if (nval === undefined) {return}
                    if (nval.id === undefined) {return}
                    this.getList(nval.id)
                }
            }
        }
    },

    methods: {
        getList(_id) {
            this.resetTemp()
            fetchList({id:_id}).then(result => {
                if (!result.success) {
                    this.notify(result)
                    return
                }
                this.temp = result.map.rows[0]
            })
        },
        // 给外部调用，清空form
        resetTemp() {
            this.temp = {
                columnname: '',
                columnnamesql: '',
                columnnamesqlsum: '',
                columnshowname: '',
                isfrozencolumn: '',
                needsum: '',
                sort: '',
                ishidden: '',
                canadd: '',
                tmptTableId: '',
                isquery: '',
                columntype: '',
                issortcolumn: '',
                optionssql: '',
                dataresource: '',
                optionspage: '',
                tablealiasname: '',
                columnwidth: '',
                deleteflag: '',
                inputwidth4adddialog: '',
                linewidth4adddialog: '',
                required4adddialog: '',
                dataoptions4adddialog: '',
                style4adddialog: '',
                charttype: '',
                columnDatatype: '',
                columnIsnotnull: '',
                queryType: '',
                defaultValue: '',
                columnTip: '',
                dataTransfer: '',
                columnlayoutStyle4adddialog: '',
                id: undefined
            }
        },
        // 给外部调用，设置默认值，请根据实际情况修改id值
        defaultTemp() {
            this.temp = {
                deleteflag: 0, //设置默认值
            }
        },
        // 树表： 拿当前节点ID作为父节点ID，建立树关系
        setParentNodeId(id) {
            this.temp.tmptTbColumnId = id
        },
        // 给外部调用，插入记录
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const param = Object.assign({}, this.temp)
                    createApi(param).then((r) => {
                        this.notify(r)
                        if (r.success) {
                            this.resetTemp()
                            // 从父组件调用此方法，进行回调下
                            if (this.isModule) {
                                this.$emit('createResult')
                            }
                        }
                    })
                }
            })
        },
        // 给外部调用，修改记录
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const param = { id:this.temp.id }
                    param.columnname = this.temp.columnname
                    param.columnnamesql = this.temp.columnnamesql
                    param.columnnamesqlsum = this.temp.columnnamesqlsum
                    param.columnshowname = this.temp.columnshowname
                    param.isfrozencolumn = this.temp.isfrozencolumn
                    param.needsum = this.temp.needsum
                    param.sort = this.temp.sort
                    param.ishidden = this.temp.ishidden
                    param.canadd = this.temp.canadd
                    param.tmptTableId = this.temp.tmptTableId
                    param.isquery = this.temp.isquery
                    param.columntype = this.temp.columntype
                    param.issortcolumn = this.temp.issortcolumn
                    param.optionssql = this.temp.optionssql
                    param.dataresource = this.temp.dataresource
                    param.optionspage = this.temp.optionspage
                    param.tablealiasname = this.temp.tablealiasname
                    param.columnwidth = this.temp.columnwidth
                    param.deleteflag = this.temp.deleteflag
                    param.inputwidth4adddialog = this.temp.inputwidth4adddialog
                    param.linewidth4adddialog = this.temp.linewidth4adddialog
                    param.required4adddialog = this.temp.required4adddialog
                    param.dataoptions4adddialog = this.temp.dataoptions4adddialog
                    param.style4adddialog = this.temp.style4adddialog
                    param.charttype = this.temp.charttype
                    param.columnDatatype = this.temp.columnDatatype
                    param.columnIsnotnull = this.temp.columnIsnotnull
                    param.queryType = this.temp.queryType
                    param.defaultValue = this.temp.defaultValue
                    param.columnTip = this.temp.columnTip
                    param.dataTransfer = this.temp.dataTransfer
                    param.columnlayoutStyle4adddialog = this.temp.columnlayoutStyle4adddialog
                    updateApi(param).then((r) => {
                        this.notify(r)
                        if (r.success) {
                            this.resetTemp()
                            // 从父组件调用此方法，进行回调下
                            if (this.isModule) {
                                this.$emit('updateResult')
                            }
                        }
                    })
                }
            })
        },
        // 给外部调用，清除校验
        clearValidate() {
            this.$refs['dataForm'].clearValidate()
        }
    }

}
</script>
<style>

</style>
